<template>
  <div class="vebar_container" v-if="show">
    <ve-bar
      id="bar"
      ref="vebar"
      class="bar"
      :data="chartData"
      :settings="chartSettings"
      :extend="extend"
      height="380px"
      :legend-visible="false"
    ></ve-bar>
  </div>
</template>

<script>
export default {
  data() {
    this.extend = {
      tooltip: {
        show: false
      },
      color: ["#409eff"],
      grid: {
        y: 10,
        show: false
      },
      xAxis: {
        axisLine: {
          show: false
        }
      },
      yAxis: {
        axisLine: {
          show: false
        }
      },
      toolbox: {
        show: true,
        feature: {
          saveAsImage: {
            show: true,
            excludeComponents: ["toolbox"],
            pixelRatio: 2
          },
        }
      }
    };
    this.chartSettings = {
      dimension: ["专栏"],
      metrics: ["值"]
    };
    return {
      show: false,
      chartData: {
        columns: ["专栏", "值"],
        rows: [
          // { 专栏: "1/1", 值: 1393, },
        ]
      }
    };
  },
  mounted() {
    this.show = true;
  },
  watch: {
    "chartData.rows"(v) {
      this.$nextTick(_ => {
        this.$refs[`vebar`].echarts.showLoading({
          text: "数据正在加载...",
          fontSize: 20,
          color: "#fbd437",
          spinnerRadius: 40,
          maskColor: "#fff"
        });
      });
      setTimeout(() => {
        this.$nextTick(() => {
          this.$refs[`vebar`].echarts.hideLoading();
        });
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.vebar_container {
  position: relative;
}
</style>